<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>注册页面</title>
    <!-- 引入格式文件-->
    <link rel="stylesheet" href="./assets/reg.css" />
</head>

<body>
    <style></style>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_center">
            <div class="rg_form">
                <form action="#" method="post">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right">
                                <input type="text" id="username" name="username" />
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right">
                                <input type="password" id="password" name="password" />
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="phone">手机号</label></td>
                            <td class="td_right">
                                <input type="text" id="phone" name="phone" />
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="">性别</label></td>
                            <td class="td_right">
                                <label><input type="radio" name="sex" value="1" checked />男</label>&nbsp;&nbsp;&nbsp;
                                <label><input type="radio" name="sex" value="0" />女</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="">是否VIP</label></td>
                            <td class="td_right">
                                <label><input type="radio" name="vip" value="1" />是</label>&nbsp;&nbsp;&nbsp;
                                <label><input type="radio" name="vip" value="0" checked />否</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="question">密保问题</label></td>
                            <td class="td_right">
                                <input type="text" id="question" name="question" />
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="answer">密保答案</label></td>
                            <td class="td_right">
                                <input type="text" id="answer" name="answer" />
                            </td>
                        </tr>
                        <!-- <tr>
                <td class="td_left"><label for="avatar">头像</label></td>
                <td class="td_right">
                  <input type="text" id="avatar" disabled />
                  <button>选择图片</button><input type="file" hidden />
                </td>
              </tr> -->
                        <tr>
                            <td colspan="2" text-align="center">
                                <input type="submit" value="立即注册" id="btn_sub" />
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="rg_right">
            <p>已有账号？<a href="./login.html">立即登录</a></p>
        </div>
    </div>

    <script src="./lib/axios.js"></script>
    <script>
        // 点击事件
        document.querySelector('#btn_sub').addEventListener('click', function (e) {
            // 阻止表单跳转行为
            e.preventDefault()


            const username = document.querySelector('#username').value
            const password = document.querySelector('#password').value
            const phone = document.querySelector('#phone').value
            const sex = document.querySelector('[name=sex]').value
            const vip = document.querySelector('[name=vip]').value
            const question = document.querySelector('#question').value
            const answer = document.querySelector('#answer').value


            axios({
                method: 'post',
                url: 'http://124.223.14.236:3001/api/user/reg',
                data: { username, password, phone, sex, vip, question, answer },

            }).then((res) => {
                if (res.status === 200) {

                    if (!res.data.success) {
                        return alert('手机号码已存在，请重新注册')
                    }
                    alert('注册成功')
                }

            })



        })


    </script>

</body>

</html>